<template>
  <el-dialog
    v-model="visible"
    width="730px"
    :title="'身份证读卡器接入协议'"
    draggable
    close-icon="CloseBold"
    @close="closeDialog"
  >
    <div style="margin: 10px auto; text-align: center">
      <!--			<h3>身份证读卡器接入协议</h3>-->
      <div
        style="
          margin: 10px auto;
          width: 700px;
          height: 300px;
          overflow-y: auto;
          background-color: #efefef;
          text-align: left;
          padding: 10px;
          font-size: 14px;
        "
      >
        <p>
          本协议旨在规定身份证读卡器接入平台的规范和相关事项，保障用户信息安全和维护平台秩序。
          <br />一、接入规定<br />本平台默认只允许一个企业接入一台身份证读卡器。企业如需增加更多读卡器，需向平台提出申请并登记相关信息。
          <br />平台有权对违法使用身份证读卡器的行为进行处罚，包括但不限于警告、暂停读卡器使用和移交公安机关处理。
          <br />身份证读卡器受公安部监管，任何使用虚拟读卡器的行为均涉嫌违法，平台有权对企业进行处罚，情节严重的将提交公安机关处理。
          <br />二、信息安全
          <br />企业必须严格遵守国家相关法律法规，确保接入平台的身份证读卡器信息安全，不得泄露用户个人信息。
          <br />企业应按照《中华人民共和国网络安全法》等相关法律法规要求，建立健全信息安全管理制度和技术保障措施。
          <br />平台将采取必要的技术手段和管理措施，保障身份证读卡器的数据传输和存储安全，防止信息泄露、篡改或损坏。
          <br />三、平台秩序维护<br />企业应遵守平台规定，不得利用身份证读卡器进行任何违法、违规操作，如恶意竞争、扰乱市场秩序等。
          <br />企业应积极配合平台开展各项管理和监督工作，及时提供相关数据和信息。
          <br />平台有权对违法、违规行为采取必要的处罚措施，企业应自觉接受并配合处理。
        </p>
      </div>
      <div>
        <el-checkbox label="我已阅读并同意" name="agreeCheckBox" @change="changeMind" />
      </div>
      <el-button type="primary" :disabled="btnDisabled" @click="submit">确认接入</el-button>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { confirmCardReader } from "@/api/common/other";

const props = defineProps({
  dialogModel: {
    type: Object,
    default: () => ({
      visible: false,
      detail: "manager",
      code: "",
    }),
  },
});
const btnDisabled = ref(true);

const emits = defineEmits(["sendModelClose"]);

const visible = ref(props.dialogModel.visible);
const { dialogModel } = toRefs(props);

function changeMind(val) {
  btnDisabled.value = !val;
}

function submit() {
  confirmCardReader(dialogModel.value.code).then((data) => {
    if (data.success) {
      ElMessage.success(data.msg);
      closeDialog();
    } else {
    }
  });
}

function sendModelClose(query) {
  emits("sendModelClose", query);
}

function closeDialog(query) {
  visible.value = false;
  sendModelClose(query);
}
</script>

<style scoped lang="less"></style>
